<template>
  <div>
      <div class="form_wrap">
        <div>
          <el-input v-model="searchText" placeholder="输入名称"></el-input>
          <el-button type="primary" @click="toSend">搜索</el-button>
        </div>
          <div>
          <el-button type="success" @click="open">添加</el-button>
          </div>
      </div>
      <!-- 添加管理员的弹出层 -->
      <el-dialog :title="title" width="50%" :visible.sync="adminFlag" @close="myclose">
          <el-form label-width="120px"
           :model="adminObj" :rules="rules"
           ref="adminForm">
              <el-form-item label="用户名" prop="userName">
                  <el-input v-model="adminObj.userName"></el-input>
              </el-form-item>
                <el-form-item label="姓名：" prop="turename">
                        <el-input v-model="adminObj.turename"></el-input>
                </el-form-item>
                  <el-form-item label="手机号：" prop="phone">
                        <el-input v-model="adminObj.phone"></el-input>
                </el-form-item>
                 <el-form-item label="权限选择："  prop="power">
                       <el-select v-model="adminObj.power">
                          <el-option value="1" label="系统管理员"></el-option>
                          <el-option value="2" label="课程管理员"> </el-option>
                       </el-select>
                </el-form-item>
          </el-form>

        <!-- 弹出层 -->
          <template slot="footer">
              <el-button type="primary" @click="toSave">确定</el-button>
              <el-button @click="toClose">取消</el-button>
          </template>
      </el-dialog>
  </div>
</template>

<script>
import {addAdminApi,EditAdminApi} from '../../../api/admin.js'
export default {
  name: 'Vuepro2209AdminForm',

  data() {
    return {
      searchText:"", //搜索条件
      title:"添加管理员",
      adminFlag:false,//管理员的弹出层
      editId:"",//修改id
      adminObj:{  
          userName:"",//用户名
          turename:"",//真实姓名
          phone:"",//手机号
          password:"123456",//默认密码
          power:"",//1 系统管理员 2 课程管理员
      },
      rules:{//表单规则
        userName:[{required:true,message:"用户名必填",trigger:'blur'}],
        turename:[{required:true,message:"真实姓名必填",trigger:'blur'}],
        phone:[{pattern:/^1[3|5|6|7|8|9]\d{9}$/,message:"手机号不符合规则",trigger:'blur'}],
        power:[{required:true,message:"权限必选",trigger:'blur'}]
      }
    }
  },
  created(){
    // 接受兄弟组件在点击编辑 时候传来的当前行数据
    this.$bus.$on('sendrow',(row)=>{
       this.title="编辑管理员"
        this.adminFlag=true;
        this.adminObj=row;
        this.editId=row.tokenId; //修改的用户id
    })
  },
  mounted() {
    
  },
  methods: {
    myclose(){ //弹出层的关闭事件
        console.log(this.$refs.adminForm)
        this.$refs.adminForm.resetFields();
    },
    toSend(){ //点击搜素 完成兄弟组件传值
        // 输入的搜索条件传给兄弟组件
        this.$bus.$emit("sendSeaTxt",this.searchText)
        this.searchText=""
    },
    toClose(){ //点击取消关闭
      this.adminFlag=false;
    },
    open(){ //点击添加打开遮罩
      // 只能重置为上一次的值
      // this.$refs.adminForm.resetFields();
      this.adminFlag=true;
      this.title="添加管理员"
      this.editId="";
      this.adminObj.userName=""
      this.adminObj.turename=""
      this.adminObj.phone=""
      this.adminObj.power=""
    },
     toSave(){ //添加管理员或编辑管理员
        // 表单验证通过  去走添加接口
      this.$refs.adminForm.validate().then(async ()=>{

          // 调用添加接口
          if(this.editId){ //修改接口
              console.log(this.adminObj)
              this.adminObj.tokenId=this.editId;
            let editRes=await EditAdminApi(this.adminObj)
              console.log(editRes)
    
                this.$message.success("编辑管理员成功")
            
          }else{ //添加接口
             let res=await  addAdminApi(this.adminObj)
            console.log(res);
             if(res.data.success){
              this.$message.success("添加管理成功")
            }
          }
            // 关闭遮罩层
              this.adminFlag=false;
              // 重置表单
              this.$refs.adminForm.resetFields();
          
              // 重新获取列表
              this.$bus.$emit("sendSeaTxt",this.searchText)
      })
    
    }
  },
};
</script>
<style lang="less"> 
    .form_wrap{
      display:flex;
      justify-content:space-between;
      >div:nth-child(1){
          display:flex;
      }
    }
</style>